<template>
  <div @click.stop="open" class="sign-box">
    <img v-if="data.imgUrl" class="imgCanvas" :src="data.imgUrl" />
    <span v-else>{{ t('点击上传签名') }}</span>
  </div>
  <a-modal
    v-model:visible="data.visible"
    :width="600"
    :title="t('签名')"
    @ok="confirm"
    @cancel="cancel"
  >
    <vue-esign
      v-if="data.visible"
      ref="canvas"
      :width="800"
      :height="300"
      :isCrop="signInfo.isCrop"
      :lineWidth="signInfo.lineWidth"
      :lineColor="signInfo.lineColor"
      v-model:bgColor="signInfo.bgColor"
    />
  </a-modal>
</template>
<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import vueEsign from 'vue-esign';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  let emits = defineEmits(['submit']);
  let props = defineProps(['src']);
  const canvas = ref();
  const data: {
    visible: boolean;
    imgUrl: string;
  } = reactive({
    visible: false,
    imgUrl: '',
  });
  const signInfo = reactive({
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false,
  });
  onMounted(() => {
    if (props.src) {
      data.imgUrl = props.src;
    }
  });
  function open() {
    data.visible = true;
    if (props.src) {
      data.imgUrl = props.src;
    }
  }
  function cancel() {
    canvas.value.reset();
  }
  function confirm() {
    canvas.value
      .generate()
      .then((res) => {
        if (res) {
          emits('submit', res);
          data.imgUrl = res;
          data.visible = false;
        }
      })
      .catch((err) => {
        console.log('err: ', err);
      });
  }
</script>
<style lang="less" scoped>
  .sign-box {
    width: 104px;
    height: 104px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sign {
    width: 100%;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
  }
</style>
